<!DOCTYPE html>
<html><head><title>Alkaline playground</title>
	<style type="text/css">
		textarea {
			width: 45%;
			height: 20em;
		}
		#messages {
			height: 20em;
		}
		.warning {
			color: Orange;
		}
		.error {
			color: Red;
		}
		.box {
			display: inline-block;
			border: 1px solid #AAA;
			padding: 0.2em;
		}
		.half {
			display: inline-block;
			width: 45%;
			vertical-align: top;
		}
	</style>
	<!---->
	<script type="text/javascript" src="output/Alkaline.bootstrap.js"></script>
	<!---- >
	<script type="text/javascript" src="Alkaline.js"></script>
	<!---->
	<script type="text/javascript">
	
	if (typeof console == 'undefined') {
		var console = {};
		console.log = console.warn = console.error = function(msg){};
	}
	
	var input, output, messages, programOutput;
	var cb5to3, cbMinify, cbOptimize, cbArrayCompr, cbCondCatch, cbForEach, cbGenerators, cbPrettyPrint, radioJSDoc;
	
	function escapeHTML(s) {
		return String(s).replace(/</g, '&lt;').replace(/>/g, '&gt;');
	}

	function logMsg(msg) {
		console.log.apply(console, arguments);
		var div = document.createElement('div');
		div.innerHTML = escapeHTML(msg);
		messages.appendChild(div);
	}
	
	var echo = function(msg) {
		logMsg(msg);
	}
	
	function programWrite(msg, className) {
		var div = document.createElement('div');
		if (className)
			div.className = className;
		div.innerHTML = escapeHTML(msg);
		programOutput.appendChild(div);
	}
	
	var print = programWrite;
	
	function logWarn(msg) {
		console.warn.apply(console, arguments);
		var div = document.createElement('div');
		div.className = 'warning';
		div.innerHTML = escapeHTML(msg);
		messages.appendChild(div);
	}
	
	function logErr(msg) {
		console.error.apply(console, arguments);
		var div = document.createElement('div');
		div.className = 'error';
		div.innerHTML = escapeHTML(msg);
		messages.appendChild(div);
	}
	
	function setup() {
		var $ = function(id) { return document.getElementById(id); };
		if (!input) {
			input = $('input');
			output = $('output');
			messages = $('messages');
			cb5to3 = $('5to3');
			cbMinify = $('minify');
			cbOptimize = $('optimize');
			cbArrayCompr = $('arrayCompr');
			cbCondCatch = $('condCatch');
			cbForEach = $('forEach');
			cbGenerators = $('generators');
			cbPrettyPrint = $('prettyPrint');
			programOutput = $('programOutput');
			radioJSDoc = $('radioOutJSDoc');
		}
	}
	
	function parse() {
		setup();
		messages.innerHTML = '';
		var compileResult = new Alkaline.CompileResult(logMsg, logErr, logWarn);
		var result;
		compileResult.inputSource.addCode(input.value, 'input');
		if (cb5to3.checked) {
			compileResult.addModule('5to3');
			if (!cbArrayCompr.checked)
				compileResult.modules.byName['5to3'].setArgument('translateArrayComprehension', false);
			if (!cbCondCatch.checked)
				compileResult.modules.byName['5to3'].setArgument('translateConditionalCatch', false);
			if (!cbForEach.checked)
				compileResult.modules.byName['5to3'].setArgument('translateForEach', false);
			if (!cbGenerators.checked)
				compileResult.modules.byName['5to3'].setArgument('translateGenerators', false);
		}

		// optional modules
		if (cbOptimize.checked)
			compileResult.addModule('Optimize');
		if (cbMinify.checked)
			compileResult.addModule('Minify');

		// output modules
		if (radioJSDoc.checked)
			compileResult.addModule('JSDoc');
		else {
			// Printer options
			if (cbPrettyPrint.checked)
				compileResult.outputModule.setArgument('pp');	// pretty print
		}
		
		var logTree = input.value.length < 1000;
		
		output.value = '';
		
		if (compileResult.run())
			output.value = compileResult.output || "";
		console.log(compileResult);
	}
	
	function run() {
		setup();
		window.echo = programWrite;
		programOutput.innerHTML = '';
		try {
			eval(output.value);
			programWrite('(EOF)', 'warning');
		} catch(e) {
			programWrite('Caught exception:<br />' + e, 'error');
		}
		window.echo = logMsg;
	}
	
	if (Alkaline.bootstrap)
		Alkaline.bootstrap(this, 'output');
	
	</script>
</head><body>
	<textarea id="input">window.callMe() = 2;</textarea>
	<textarea id="output" readOnly></textarea>
	<br />
	<div class="half">
		<div>
			<button onclick="parse();">Compile</button>
			<span class="box">
				Modules:
				<input type="checkbox" id="5to3" checked /><label for="5to3">5to3</label>
				<input type="checkbox" id="optimize" /><label for="optimize">Optimize</label>
				<input type="checkbox" id="minify" /><label for="minify">Minify</label>
			</span>
			<span class="box">
				Output:
				<input type="radio" name="radioOut" id="radioOutPrinter" checked value="Printer"/><label for="radioOutPrinter">Printer</label>
				<input type="radio" name="radioOut" id="radioOutJSDoc" value="JS Doc"/><label for="radioOutJSDoc">JS Doc</label>
			</span>
		</div>
		<span class="box">
			5-to-3:
			<input type="checkbox" id="arrayCompr" checked /><label for="arrayCompr">array comprehension</label>
			<input type="checkbox" id="condCatch" checked /><label for="condCatch">conditional catch</label>
			<input type="checkbox" id="forEach" checked /><label for="condCatch">for each</label>
			<input type="checkbox" id="generators" checked /><label for="generators">generators</label>
		</span>
		<span class="box">
			Printer:
			<input type="checkbox" id="prettyPrint" checked /><label for="prettyPrint">pretty print</label>
		</span>
	</div>
	<div class="half">
		<button onclick="run();">Run</button>
		<span>
			The function <code>echo(message);</code> writes stuff to the output. <code>print(...)</code> is an alias for <code>echo</code>.
		</span>
	</div>
	<br />
	<div id="messages" class="half">Press "Compile".</div>
	<div id="programOutput" class="half">Press "Run".</div>
</body></html>